<template>
    <div class="taskList">
        <div class="title-count">
            <h2><slot></slot></h2>
            <span>0</span>
        </div>
        <ul>
            <li v-for="(item, i) in tasks" :key="item.id" v-show="item.check === isFinish">
                <div class="left">
                    <input type="checkbox" v-model="item.check">
                    <div @click="item.exit = true">
                        <input @blur="item.exit = false" class="exit" v-if="item.exit" type="text" v-model="item.task">
                        <span v-else>{{item.task}}</span>
                    </div>
                </div>
                <button class="btn" @click="del(i)">-</button>
            </li>
        </ul>
    </div>
</template>

<script>
import { useStore } from 'vuex'
import { watch } from 'vue'
export default {
    props: {
        isFinish: Boolean // 表示任务是否是已经完成的任务
    },
    setup() {
        let store = useStore()
        const tasks = store.state.tasks

        function del(i) { // 删除任务的逻辑
            tasks.splice(i, 1)
        }

        watch(() => tasks, (val) => {
            // console.log(val);
            store.commit('changeTasks', val)
        }, {
            deep: true
        })

        return {
            tasks,
            del
        }
    }
}
</script>

<style scoped lang="scss">
.taskList {
    width: 800px;
    margin: 0 auto;
}
.title-count {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    span {
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        background-color: #E6E6FA;
        border-radius: 20px;
    }
}
li {
    display: flex;
    width: 100%;
    justify-content: space-between;
    background-color: #fff;
    border-left: 5px solid #629A9C;
    border-radius: 6px;
    height: 36px;
    align-items: center;
    padding-right: 10px;
    margin-bottom: 20px;
    .left {
        display: flex;
        .exit {
            min-width: 250px;
        }
    }
    input {
        width: 22px;
        height: 22px;
        margin: 0 10px;
    }
    .btn {
        display: inline-block;
        width: 31px;
        height: 28px;
        border-radius: 14px;
        border: 6px double #FFF;
        background: #CCC;
        line-height: 14px;
        text-align: center;
        color: #FFF;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
    }
}
</style>